<template>
      <div
        class="editor-canvas-area"

      >
        <div
          v-for="(cpt, index) in componentsList"
          :key="cpt.id"
          :class="'cp cp__'+cpt.id"
          :style="{
            width: cpt.size.width+'px',
            height: cpt.size.height+'px',
            transform: 'translateX('+cpt.position.left+'px) translateY('+cpt.position.top+'px)',
            zIndex: index + 1
          }"
        >
          <ComponentTransform :info="cpt" />
        </div>
      </div>
    </template>

    <script>
    import ComponentTransform from '../components/editor-canvas/indicators/ComponentTransform.vue';

    export default{
      data(){
        return {
          componentsList:[
  {
    "name": "条形图",
    "code": "barChart",
    "componentName": "条形图",
    "config": [
      "titleConfig",
      "background",
      "xAxis",
      "yAxis",
      "legend",
      "barConfig"
    ],
    "dataConfig": [],
    "position": {
      "left": 760,
      "top": 410
    },
    "size": {
      "width": 400,
      "height": 260
    },
    "id": "BF3EGnfW4WKTlmdw",
    "titleConfig": {
      "titleVisible": false,
      "titleContent": "",
      "titleColor": "#eeeeee",
      "titleBold": false,
      "titleItalic": false,
      "titleSize": 20,
      "unitVisible": false,
      "unitContent": "",
      "unitColor": "#eeeeee",
      "unitBold": false,
      "unitItalic": false,
      "unitSize": 14
    },
    "background": {
      "color": "",
      "opacity": 0.8,
      "borderRadius": 8,
      "borderWidth": 0,
      "borderStyle": "solid",
      "borderColor": "#6f6ff5",
      "borderOpacity": 1,
      "shadowColor": "#E6A23C",
      "shadowX": 0,
      "shadowY": 0,
      "shadowBlur": 0,
      "shadowDiff": 0
    },
    "xAxis": {
      "show": true,
      "offset": 0,
      "name": "",
      "nameLocation": "end",
      "nameRotate": 0,
      "nameTextStyle": {
        "color": "",
        "fontSize": 12,
        "fontWeight": "normal"
      },
      "axisLine": {
        "show": true,
        "onZero": true,
        "lineStyle": {
          "color": "#aaaaaa",
          "width": 1,
          "type": "solid",
          "opacity": 1
        }
      },
      "axisTick": {
        "show": true,
        "alignWidthLabel": false,
        "inside": false,
        "length": 5,
        "lineStyle": {
          "color": "#aaaaaa",
          "width": 1,
          "type": "solid",
          "opacity": 1
        }
      },
      "axisLabel": {
        "show": true,
        "margin": 5,
        "rotate": 0,
        "formatter": "{value}",
        "color": "",
        "width": null,
        "height": null,
        "padding": 0,
        "borderRadius": 0
      },
      "splitLine": {
        "show": false,
        "lineStyle": {
          "color": "#aaaaaa",
          "width": 1,
          "type": "solid",
          "opacity": 1
        }
      }
    },
    "yAxis": {
      "show": true,
      "offset": 0,
      "name": "",
      "nameLocation": "end",
      "nameRotate": 0,
      "nameTextStyle": {
        "color": "",
        "fontSize": 12,
        "fontWeight": "normal"
      },
      "axisLine": {
        "show": true,
        "onZero": true,
        "lineStyle": {
          "color": "#aaaaaa",
          "width": 1,
          "type": "solid",
          "opacity": 1
        }
      },
      "axisTick": {
        "show": true,
        "alignWidthLabel": false,
        "inside": false,
        "length": 5,
        "lineStyle": {
          "color": "#aaaaaa",
          "width": 1,
          "type": "solid",
          "opacity": 1
        }
      },
      "axisLabel": {
        "show": true,
        "margin": 5,
        "rotate": 0,
        "formatter": "{value}",
        "color": "",
        "width": null,
        "height": null,
        "padding": 0,
        "borderRadius": 0
      },
      "splitLine": {
        "show": false,
        "lineStyle": {
          "color": "#aaaaaa",
          "width": 1,
          "type": "solid",
          "opacity": 1
        }
      }
    },
    "legend": {
      "show": true,
      "orient": "horizontal",
      "align": "auto",
      "itemWidth": 25,
      "itemHeight": 14,
      "selectedMode": true,
      "icon": "",
      "textStyle": {
        "color": "#ffffff",
        "fontSize": 12,
        "fontWeight": "normal"
      }
    },
    "barConfig": {}
  }
],
        }
      },
      components:{
        ComponentTransform
      },
      created(){
      }
    }
    </script>

    <style>
    .cp {
      position: absolute;
      box-sizing: border-box;
      left: 0;
      top: 0;
    }
    </style>